<!-- jsp指令：page/taglib/include -->
<%@ page language="java" pageEncoding="utf-8"%>
<!-- 引入标签库：JSTL-c标签 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="asserts/font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/main.css">
		<style>
		.zoomImage{
			 max-height:100px;
		  }
		</style>
	</head>
	<body>
		<!-- header -->
		<div class="header navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">
						易书博客后台管理系统
					</a>
				</div>
				
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="javascript:logout()"><span class="glyphicon glyphicon-log-out">&nbsp;</span>安全退出</a>
					</li>
				</ul>
				
				<form class="navbar-form navbar-right" role="search">
				  <div class="form-group">
					<input type="text" class="form-control" placeholder="关键字">
				  </div>
				  <button type="submit" class="btn btn-default">
					  <span class="glyphicon glyphicon-search"></span>
				  </button>
				</form>		
								
			</div>
		</div>
		<!-- header end -->
		
		<div class="body">
			<!-- 侧边栏 -->
			<div class="left">
				<!-- 用户信息 -->
				<div class="user-info">
					<div class="info-icon">
						<img src="${user.hicon}" width="80px" height="80px" class="img-circle" alt="">
					</div>
					<div class="info-name">${user.nickname}</div> 
				</div>
				<!-- 菜单 -->
				<div class="list-group text-center">
					<a href="main.jsp" class="list-group-item"><i class="fa fa-dashboard"></i> 仪表盘</a>
					<a href="banner?method=findAll" class="list-group-item"><i class="fa fa-file-image-o"></i> 轮播管理</a>
					<a href="article?method=findAll" class="list-group-item"><i class="fa fa-file-text-o"></i> 博客管理</a>
					<a href="category?method=findAll" class="list-group-item"><i class="fa fa-bars"></i> 类别管理</a>
					<a href="tag?method=findAll" class="list-group-item"><i class="fa fa-tags"></i> 标签管理</a>
					<a href="comment.jsp" class="list-group-item"><i class="fa fa-comment"></i> 留言管理</a>
					<a href="link?method=findAll" class="list-group-item"><i class="fa fa-chain"></i> 友情链接</a>
					<a href="ad.jsp" class="list-group-item active"><i class="fa fa-rmb"></i> 广告管理</a>
					<a href="settings.jsp" class="list-group-item"><i class="fa fa-gear"></i> 个人设置</a>
				</div>
				<div class="copy">Design by MRChai &copy; 软帝集团 版权所有</div>
			</div>
			
			<!-- 内容展示区 -->
			<div class="right">
					<!-- 	导航 -->
					<ol class="breadcrumb">
						<li><i class="fa fa-rmb"></i> 广告管理</li>
					</ol>
					<div class="container-fluid">
						<!-- 	内容面板 -->
						<div class="panel panel-default">
							<!-- 控制按钮 -->
							<div class="panel-heading">
								<button class="btn btn-primary" data-target="#addTagModal" data-toggle="modal"><i class="fa fa-plus"></i> 添加广告</button>
								<button class="btn btn-danger"><i class="fa fa-trash"></i> 批量删除</button>
							</div><!-- 控制按钮  end-->
							<div class="panel-body">
								<table class="table table-bordered table-striped">
									<tr>
										<th width="5%"><input type="checkbox" name="" id="selectAll" /></th>
										<th width="5%">ID</th>
										<th width="15%">缩略图</th>
										<th width="15%">标题</th>
										<th width="15%">简介</th>
										<th width="20%">访问地址</th>
										<th width="10%">状态(激活)</th>
										<th width="15%">操作</th>
									</tr>
									<!-- 	数据绑定 -->
									<tr>
										<td><input type="checkbox" name="" class="eid"  id="" /></td>
										<td>1</td>
										<td><img src="img/banner/1.jpg" alt=""  style="width:100%; heigh:100%"/></td>
										<td>软帝教育</td>
										<td>12年专业互联网教育经验 让教育回归本质</td>
										<td>http://www.softeem.com</td>
										<td>未激活</td>
										<td>
											<a href=""><i class="fa fa-edit"></i> 修改</a>
											&nbsp;&nbsp;
											<a href=""><i class="fa fa-trash"></i> 删除</a>
											&nbsp;&nbsp;
											<a href=""><i class="fa fa-refresh"></i> 激活</a>
										</td>
									</tr><!-- 	数据绑定 end -->
								</table>
								<!-- 	分页 -->
								<div class="text-right">
									<ul class="pagination" style="margin:0">
										<li><a href="" title="上一页"><span class="fa fa-angle-left"></span></a></li>
										<li class="active"><a href="">1</a></li>
										<li><a href="">2</a></li>
										<li><a href="">3</a></li>
										<li><a href="" title="下一页"><span class="fa fa-angle-right"></span></a></li>
									</ul>
								</div><!-- 	分页 end-->
							</div>
						</div><!-- 	内容面板 end -->
					</div>
			</div><!-- 	内容展示区 end-->
		</div>
		
		<!-- 弹层组件 上传轮播图 -->
		<div class="modal fade"  id="addTagModal" role="dialog" aria-labelledby="mylabel">
			<div class="modal-dialog">
				<div class="modal-content">
					<form action="">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title" id="mylabel">上传图片</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<input type="file" name="file"  id="selfile" />
								<br />
								<img id="preview"  src=""  class="zoomImage"/>
							</div>
							<div class="form-group">
								<input type="text" class="form-control" id="title" name="title"  placeholder="请输入标题"/>
							</div>
							<div class="input-group">
								<div class="input-group-addon">http://</div>
								<input type="text" class="form-control" id="link"  name="link" placeholder="请输入网址"/>
							</div>
							<br />
							<textarea  class="form-control" rows="5" id="summary" name="summary"  placeholder="请输描述"></textarea>
						</div>
						<div class="modal-footer">
							<button class="btn btn-primary" type="submit">上传</button>
							<button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- 弹层组件 上传轮播图 end -->
		
		<!-- 		js插件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="asserts/layer/layer.js"></script>
		<script src="asserts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="js/comm.js"></script>
		<script>
			$(function(){
				//图片预览
				$('#selfile').on('change',function(){
					var reader = new FileReader();
					//读取图片文件
					reader.readAsDataURL($(this).get(0).files[0]);
					//当图片文件被加载时获取资源(base64编码)
					reader.onload=function(e){
						$('#preview').attr('src',e.target.result);
					}
				})
			})
		</script>
		
<!-- 		emmet -->
<!-- 		table.tab>tr*3>td*5>a	 -->
	</body>
</html>
